<template>
  <div class='container'>
    <el-card>
      <el-form ref="iptRef" :model="queryInfo" label-width="80px" class="list_form">
        <el-row>
          <el-col :span="16">
            <el-form-item label="关键字" class="keywords" prop="keyword">
              <el-input v-model="queryInfo.keyword" placeholder="根据编号搜索" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="operate">
            <el-form-item>
              <el-button size="small" @click="iptClear">清除</el-button>
              <el-button size="small" type="primary" @click="getGroupList(queryInfo)">搜索</el-button>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <el-alert type="info" show-icon :closable="false" :title="dataNumber">
      </el-alert>
      <!-- 表格区域 -->
      <el-table :data="list" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="220"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType ==='1'">单选</span>
            <span v-if="scope.row.questionType ==='2'">多选</span>
            <span v-if="scope.row.questionType ==='3'">简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="220">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.questionIDs" :key="index">
              <a href="javascript:;" @click="showDialog(item.id)" class="title">{{item.number}}</a>
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180"></el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)"></el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)"></el-table-column>
        <el-table-column prop="userName" label="录入人"></el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="danger" plain icon="el-icon-delete" circle @click="removeList(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.page" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize"
        layout=" prev,pager,next,sizes,jumper" :total="total">
      </el-pagination>
      <!-- 对话框 -->
      <el-dialog title="题目预览" :visible.sync="PreviewDialog" width="900px" @close="colse">
        <Preview :PreviewDialog="PreviewDialog" @Preview="Preview" :currentQuestion="newList" :directory="directory"
          :discipline="discipline" :isVedioShow="isVedioShow" @show="show"></Preview>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import { detail as newDetail } from '@/api/hmmm/directorys.js'
import { detail as discipline } from '@/api/hmmm/subjects.js'
import Preview from '../components/questions-preview.vue'
export default {
  components: {
    Preview
  },
  computed: {
    dataNumber () {
      return '数据一共' + this.total + '条'
    }
  },
  data () {
    return {
      queryInfo: {
        keyword: '',
        page: 1,
        pagesize: 5
      },
      list: [],
      newList: {},
      total: 0,
      PreviewDialog: false,
      directory: '',
      discipline: '',
      isVedioShow: false
    }
  },
  created () {
    this.getGroupList()
  },
  methods: {
    async getGroupList () {
      const { data: res } = await randoms(this.queryInfo)
      this.list = res.items
      this.listForm = res
      this.total = res.counts
    },
    handleSizeChange (newsize) {
      console.log(newsize)
      this.queryInfo.pagesize = newsize
      this.getGroupList()
    },
    handleCurrentChange (newpage) {
      this.queryInfo.page = newpage
      this.getGroupList()
    },
    iptClear () {
      this.$refs.iptRef.resetFields()
    },
    async removeList (id) {
      console.log(id)
      const confirmResult = await this.$confirm('此操作将永久删除该题组, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
        // 如果用户点击确认，则confirmResult 为'confirm'
        // 如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
      ).catch(err => err)
      // 判断用户是否确定删除
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      await removeRandoms({ id })
      // if (res.request.status !== 200) {
      //   return this.$message.error('删除列表失败')
      // }
      this.$message.success('删除成功')
      this.getGroupList()
    },
    Preview () {
      this.PreviewDialog = false
    },
    show () {
      this.isVedioShow = !this.isVedioShow
    },
    colse () {
      this.isVedioShow = false
    },
    async showDialog (id) {
      this.PreviewDialog = true
      const { data: res } = await detail({ id })
      this.newList = res
      const { data: res1 } = await newDetail({ id: res.catalogID })
      this.directory = res1.directoryName
      const { data: res2 } = await discipline({ id: res.subjectID })
      this.discipline = res2.subjectName
    }
  }
}
</script>

<style scoped lang='less'>
.el-card {
  margin: 10px;
}
.el-alert {
  margin-bottom: 20px;
}
.el-pagination {
  margin-top: 10px;
}
.keywords {
  width: 350px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #67696d;
}
.operate {
  text-align: right;
}
.el-pagination {
  text-align: right;
}
.list_form {
  height: 50px;
  // padding-bottom: -200px;
}
.title {
  color: #4397f7;
}
/deep/ .el-dialog {
  max-width: 900px !important;
}
</style>
